<script lang="ts" setup>
  import { onMounted, ref } from "vue";
  import {baseUrl} from "@/api/http"
  import {goBack} from "@/util/go"
  import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
  import {getHanfuDe} from "@/api/hanfu/hanfu";
  import shopBottom from "@/componets/bottom/shopBottom.vue";
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";


	const content = ref({
    name: "十二花神系列之梅花🍀 | 秦手折梅，暗香盈袖",
		time: "2025-03-03",
    description: "",
    file: [],
    price: 0.00,
    typeName: ""
	})
  uni.getStorage({
    key: 'hanfuId',
  }).then(res => {
    getHanfuDe(res.data).then(res => {
      content.value = res.data.data.data
      console.log(content.value)
    })
  })


const pre = (url:string) => {
	uni.previewImage({
		urls: [url]
	})
}

// 分享给朋友
  onShareAppMessage(() => ({
    title: '如初国风馆',
    path: '/pages/index/index', // 替换为你的页面路径
    imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))
  // 分享到朋友圈
  onShareTimeline(() => ({
  	  title: '如初国风馆',
  	  path: '/pages/index/index', // 替换为你的页面路径
  	  imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))

</script>

<template>
  <view class="page">
    <!-- 头部导航 -->
    <view class="header">
      <view class="back cursor-pointer" @click="goBack">
        <uni-icons type="left" size="20" />
      </view>
      <text class="title">汉服详细</text>
      <view class="actions">
        <uni-icons type="more-filled" size="20" class="cursor-pointer" />
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y>
      <view class="article">
        <!-- 文章标题 -->
        <view class="article-header">
          <text class="main-title"
            >{{content.name}}</text
          >
          <view class="article-meta">
            <text class="date">时间: {{content.time}}</text>
            <text class="tag cursor-pointer">类型: {{content.typeName}}</text>
          </view>
          <view class="article-meta">
            <text></text>
            <text class="price">￥: {{content.price}}</text>
          </view>

        </view>

        <!-- 文章内容 -->
        <view class="article-content">
          <text>{{content.description}}</text>

          <!-- 图片区域 -->
		<view v-for="i in content.file">
<!-- 			<video 
				src="" /> -->
			<image
			  class="article-image"
			  mode="widthFix"
			  :src="baseUrl + i.clientUrl"
			  @click="pre(baseUrl + i.clientUrl)"
			/>
		</view>


        </view>
      </view>
    </scroll-view>
	
	<shopBottom></shopBottom>
  </view>
  
</template>



<style scoped lang="scss">
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: #f6f7fb;
}

.header {
	.back {
	  width: 44rpx;
	  height: 44rpx;
	  display: flex;
	  align-items: center;
	}
	
	.title {
	  flex: 1;
	  text-align: center;
	  font-size: 16px;
	  font-weight: 500;
	  color: #333333;
	}
	
	.actions {
	  width: 44rpx;
	  height: 44rpx;
	  display: flex;
	  align-items: center;
	  justify-content: flex-end;
	}
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 32rpx;
  z-index: 99999;
  background-color: white;
  padding-top: 90rpx;
  border-bottom: 1px solid #f5f5f5;
}



.content {
	.article {
	  padding: 32rpx;
	}
	
	.article-header {
	  margin-bottom: 48rpx;
	}
	
	.main-title {
	  font-size: 20px;
	  font-weight: 600;
	  color: #333333;
	  line-height: 1.4;
	  margin-bottom: 24rpx;
	}
	
	.article-meta {
    .price {
      font-size: 14px;
      color: #67d395;
      font-weight: 700;
    }
	  display: flex;
	  align-items: center;
    margin-top: 10rpx;
	  justify-content: space-between;
	}

  .article-content {
    word-wrap: break-word;
  }

	.date {
	  font-size: 14px;
	  color: #999999;
	}
	
	.tag {
	  font-size: 14px;
	  color: #666666;
	}
	
	.paragraph {
	  margin-bottom: 48rpx;
	}
	
	.symbol {
	  display: block;
	  font-size: 16px;
	  color: #666666;
	  margin-bottom: 16rpx;
	}
	
	.text {
	  display: block;
	  font-size: 15px;
	  color: #333333;
	  line-height: 1.8;
	  margin-bottom: 16rpx;
	}
	
	.article-image {
	  width: 100%;
	  margin: 32rpx 0;
	  border-radius: 8px;
	}
  flex: 1;
  overflow: auto;
  padding-bottom: 100rpx;
  position: absolute;
  top: 200rpx;
  width: 100%;
  margin: 0 auto;
  background: white;
}



.footer {
	.action-btn {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  margin-right: 48rpx;
	}
	
	.action-btn text {
	  font-size: 12px;
	  color: #666666;
	  margin-top: 8rpx;
	}
	
	.consult-btn {
	  height: 80rpx;
	  line-height: 80rpx;
	  background-color: #68d596;
	  color: #ffffff;
	  font-size: 16px;
	  border-radius: 40rpx;
	  width: 64%;
	}
	
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  align-items: center;
  height: 120rpx;
  padding: 0 32rpx;
  background-color: #ffffff;
  border-top: 1px solid #f5f5f5;
  flex-shrink: 0;
}


</style>
